<script setup>
import {reactive, ref, computed} from 'vue';
import router from '@/router';
import loginApi from '@/api/login_api.js';
import {ElMessage} from "element-plus";
//import { adminStore, tokenStore } from '../store/store.js';
const activeIndex = ref('1')

// 取出当前登录用户的信息
const loginAdmin = ref({
  name: "未登录",
});
getLoginAdmin();

//密码重置表单
const passwordForm=reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});

//密码重置对话框控制
const passwordDialogVisible = ref(false);

//取消密码重置
function cancelPasswordReset(){
  passwordForm.oldPassword = '';
  passwordForm.newPassword = '';
  passwordForm.confirmPassword = '';
}
//提交密码重置
async function submitPasswordReset(){
  if (!passwordForm.oldPassword){
    ElMessage.warning("请输入原密码");
    return;
  }
  if (!passwordForm.newPassword){
    ElMessage.warning("请输入新密码");
    return;
  }
  if (passwordForm.newPassword!==passwordForm.confirmPassword){
    ElMessage.warning("两次密码不一致");
    return;
  }
  if (passwordForm.oldPassword===passwordForm.newPassword){
    ElMessage.warning("新密码不能与原密码相同");
    return;
  }
  const  passwords={
    oldPassword: passwordForm.oldPassword,
    newPassword: passwordForm.newPassword,
    confirmPassword: passwordForm.confirmPassword
  };
  loginApi.updatePassword(passwords).then(res=>{
    ElMessage.success("密码重置成功,请重新登陆");
    cancelPasswordReset();
    logout();
  }).catch( error=>{
    console.log(error);
  });
}

// 菜单  用户管理， 分类管理， 商品管理
const allMenuData = [
  {
    name: '信息管理', icon: 'Coin', children: [
      {name: '账单管理', icon: 'Collection', path: "/bill"},
    ]
  },
  {
    name: '预约管理', icon: 'Calendar', children: [
      {name: '预约列表', icon: 'List', path: "/reservation"},
    ]
  },
  {
    name: '房间管理', icon: 'House', children: [
      {name: '房间设备列表', icon: 'Setting', path: "/room"},
    ]
  },
  {
    name: '会员管理', icon: 'User', children: [
      {name: '会员列表', icon: 'UserFilled', path: "/user"},
    ]
  },
  {
    name: '工作人员管理', icon: 'Avatar', children: [
      {name: '工作人员列表', icon: 'List', path: "staff"},
    ]
  },
  {
    name: '个人账单管理', icon: 'Calendar', children: [
      {name: '个人账单', icon: 'List', path: "billself"},
    ]
  },
];

// 根据用户角色过滤菜单
const menuData = computed(() => {
  // 如果用户未登录或没有role_id，默认显示所有菜单
  if (!loginAdmin.value || loginAdmin.value.role_id === undefined) {
    return allMenuData;
  }

  const roleId = loginAdmin.value.role_id;

  // 管理员(role_id=0)可以看到所有菜单
  if (roleId === 0) {
    return allMenuData;
  }

  // 用户(role_id=1)看不到工作人员管理菜单
  if (roleId === 1) {
    return allMenuData.filter(menu => menu.name !== '工作人员管理'&& menu.name !== '会员管理'&& menu.name !== '预约管理'&& menu.name !== '信息管理');
  }

  // 其他角色默认显示所有菜单
  return allMenuData;
});

async function getLoginAdmin(){
  let token = localStorage.getItem("token");
  if (!token){
    //跳转到登录页面
    await router.push('/login');
    return;
  }

  const res=await loginApi.logininfo();
  loginAdmin.value=res;

  // adminStore().update(res);
}
// 用户下拉菜单的点击
function handleSelect(key, keyPath) {
  if (key == 'logout') {
    // 用户退出
    logout();
  }else if (key  == '1-2'){
    passwordDialogVisible.value=true;
  }
}

// 左侧菜单动作
function handleMenu(key) {
  if (key) {
    router.push(key);
  }
}

// 退出
function logout() {
  // 清除Token
  localStorage.removeItem("token");
  // tokenStore().update(null);
  // adminStore().update(null);
  // sessionS
  // 跳转到登录
  router.push('/login')
}

// 左侧菜单展开折叠
const isCollapse = ref(false);
</script>

<template>

  <div class="cyberpunk-layout">

    <div class="cyberpunk-header">
      <div class="header-left">
        <div class="logo-section" @click="isCollapse=!isCollapse">
          <div class="logo-wrapper">
            <div class="logo-glow"></div>
            <img class="logo-img" src="@/assets/logo.png" alt="易视界" />
          </div>
          <transition name="slide-fade">
            <div v-if="!isCollapse" class="logo-text">easy<span class="highlight">A</span>电竞酒店</div>
          </transition>
        </div>

        <div class="header-nav">
          <el-menu
            :default-active="activeIndex"
            mode="horizontal"
            background-color="transparent"
            text-color="#00f3ff"
            active-text-color="#ff00ff"
            @select="handleSelect"
            class="header-menu">
            <el-menu-item index="0">首页</el-menu-item>

          </el-menu>
        </div>
      </div>

      <div class="header-right">
        <div class="neon-clock">
          {{ new Date().toLocaleTimeString() }}
        </div>

        <div class="user-actions">
          <el-dropdown @command="handleSelect">
            <div class="user-profile">
              <div class="avatar-wrapper">
                <div class="avatar-glow"></div>
                <el-avatar :size="40" class="cyber-avatar">
                  <el-icon :size="20"><User /></el-icon>
                </el-avatar>
              </div>
              <transition name="slide-fade">
                <div v-if="!isCollapse" class="user-info">
                  <div class="username">{{ loginAdmin?loginAdmin.name:'未登录' }}</div>
                  <div class="user-role"></div>
                </div>
              </transition>
              <el-icon class="dropdown-icon"><arrow-down /></el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu class="cyber-dropdown">
                <el-dropdown-item command="1-2">
                  <el-icon><Edit /></el-icon>
                  修改密码
                </el-dropdown-item>
                <el-dropdown-item command="logout" divided>
                  <el-icon><SwitchButton /></el-icon>
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>

    <div class="cyberpunk-container">
      <div :class="['cyber-sidebar', { 'sidebar-collapse': isCollapse }]">
        <div class="sidebar-menu">
          <el-menu
            active-text-color="#00f3ff"
            background-color="rgba(15, 15, 30, 0.85)"
            class="el-menu-vertical"
            default-active="/charts"
            text-color="#aaa"
            :collapse="isCollapse"
            :collapse-transition="false"
            @select="handleMenu"
            :unique-opened="true">
            <!-- 动态生成菜单 -->
            <el-sub-menu v-for="(menu, index) in menuData" :index="index.toString()" :key="index">
              <template #title>
                <div class="menu-icon-wrapper">
                  <el-icon><component :is="menu.icon" /></el-icon>
                </div>
                <span class="menu-title">{{ menu.name }}</span>
              </template>
              <el-menu-item v-for="(child, ind) in menu.children" :index="child.path" :key="ind">
                <el-icon><component :is="child.icon" /></el-icon>
                <span>{{ child.name }}</span>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </div>

        <div class="sidebar-footer">
          <div class="system-status">
            <div class="status-indicator online"></div>
            <span>系统在线</span>
          </div>
        </div>
      </div>

      <div class="main-content">
        <div class="content-wrapper">
          <div class="grid-background"></div>
          <router-view></router-view>
        </div>
      </div>
    </div>

    <!-- 密码重置对话框 -->
    <el-dialog
      v-model="passwordDialogVisible"
      title="修改密码"
      width="500px"
      class="cyber-dialog"
      :modal="true"
      :lock-scroll="true"
      center>
      <div class="dialog-glow"></div>
      <el-form :model="passwordForm" label-width="100px" class="password-form">
        <el-form-item label="原密码">
          <el-input
              v-model="passwordForm.oldPassword"
              type="password"
              show-password
              placeholder="请输入原密码"
              size="large" />
        </el-form-item>
        <el-form-item label="新密码">
          <el-input
              v-model="passwordForm.newPassword"
              type="password"
              show-password
              placeholder="请输入新密码"
              size="large" />
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input
              v-model="passwordForm.confirmPassword"
              type="password"
              show-password
              placeholder="请再次输入新密码"
              size="large" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelPasswordReset" size="large" class="cyber-button">取消</el-button>
          <el-button type="primary" @click="submitPasswordReset" size="large" class="cyber-button primary">确定</el-button>
        </div>
      </template>
    </el-dialog>

  </div>

</template>

<style scoped>
.cyberpunk-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #0a0a1a;
  color: #e0e0ff;
  overflow: hidden;
  position: relative;
}

.cyberpunk-layout::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(0, 100, 255, 0.1) 0%, transparent 20%),
    radial-gradient(circle at 90% 80%, rgba(255, 0, 150, 0.1) 0%, transparent 20%);
  z-index: -1;
}

.cyberpunk-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  background: rgba(10, 10, 25, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 243, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 243, 255, 0.2);
  padding: 0 20px;
  z-index: 100;
  position: relative;
}

.cyberpunk-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00f3ff, #ff00ff, transparent);
  animation: scanline 3s linear infinite;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 30px;
}

.logo-section {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
}

.logo-section:hover {
  background-color: rgba(0, 243, 255, 0.1);
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.3);
}

.logo-wrapper {
  position: relative;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 243, 255, 0.5), transparent 70%);
  animation: pulse 2s infinite;
}

.logo-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  position: relative;
  z-index: 2;
}

.logo-text {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin-left: 12px;
  text-shadow: 0 0 10px rgba(0, 243, 255, 0.7);
  letter-spacing: 1px;
}

.highlight {
  color: #ff00ff;
  text-shadow: 0 0 10px rgba(255, 0, 255, 0.7);
}

.header-nav {
  height: 100%;
}

.header-menu {
  background: transparent !important;
  border: none !important;
}

:deep(.header-menu .el-menu-item) {
  height: 70px;
  border-bottom: 2px solid transparent;
  font-weight: 500;
  transition: all 0.3s ease;
}

:deep(.header-menu .el-menu-item:hover) {
  background: rgba(0, 243, 255, 0.1) !important;
  border-bottom: 2px solid #00f3ff;
}

:deep(.header-menu .el-menu-item.is-active) {
  background: rgba(255, 0, 255, 0.1) !important;
  border-bottom: 2px solid #ff00ff;
  color: #ff00ff !important;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.neon-clock {
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: bold;
  color: #00f3ff;
  text-shadow: 0 0 5px rgba(0, 243, 255, 0.7);
  padding: 8px 15px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 243, 255, 0.3);
}

.user-profile {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px 15px;
  border-radius: 30px;
  transition: all 0.3s ease;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 243, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.user-profile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.user-profile:hover::before {
  transform: translateX(100%);
}

.avatar-wrapper {
  position: relative;
}

.avatar-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 243, 255, 0.5), transparent 70%);
  animation: pulse 2s infinite;
  top: 0;
  left: 0;
  z-index: 1;
}

.cyber-avatar {
  background: linear-gradient(135deg, #00f3ff, #ff00ff);
  border: 2px solid #00f3ff;
  position: relative;
  z-index: 2;
}

.user-info {
  margin: 0 12px;
}

.username {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
}

.user-role {
  font-size: 12px;
  color: #00f3ff;
  white-space: nowrap;
}

.dropdown-icon {
  color: #00f3ff;
  transition: transform 0.3s ease;
  font-size: 18px;
}

.user-profile:hover .dropdown-icon {
  transform: rotate(180deg);
}

.cyberpunk-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.cyber-sidebar {
  width: 250px;
  background: rgba(15, 15, 30, 0.85);
  transition: all 0.3s ease;
  box-shadow: 3px 0 15px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(0, 243, 255, 0.2);
  backdrop-filter: blur(5px);
  position: relative;
  z-index: 10;
}

.cyber-sidebar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(0, 243, 255, 0.05), transparent);
  pointer-events: none;
}

.sidebar-collapse {
  width: 70px;
}

.sidebar-menu {
  flex: 1;
  overflow-y: auto;
}

.el-menu-vertical {
  border: none;
  height: 100%;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 100%;
}

.menu-icon-wrapper {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  background: rgba(0, 243, 255, 0.1);
  border-radius: 4px;
  border: 1px solid rgba(0, 243, 255, 0.3);
}

.menu-title {
  font-size: 15px;
  font-weight: 500;
}

.el-menu-item, .el-sub-menu__title {
  height: 50px;
  line-height: 50px;
  transition: all 0.3s ease;
}

.el-menu-item {
  font-size: 14px;
}

.el-menu-item:hover, .el-sub-menu__title:hover {
  background-color: rgba(0, 243, 255, 0.1) !important;
  color: #00f3ff !important;
}

:deep(.el-menu-item.is-active) {
  background: linear-gradient(90deg, rgba(0, 243, 255, 0.2), transparent) !important;
  color: #00f3ff !important;
  border-left: 3px solid #00f3ff;
}

.sidebar-footer {
  padding: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.system-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #aaa;
}

.status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #aaa;
}

.status-indicator.online {
  background: #00ff00;
  box-shadow: 0 0 8px #00ff00;
}

.main-content {
  flex: 1;
  overflow: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.content-wrapper {
  flex: 1;
  background: rgba(20, 20, 40, 0.7);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  border: 1px solid rgba(0, 243, 255, 0.2);
  backdrop-filter: blur(5px);
  position: relative;
}

.grid-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(rgba(0, 243, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 243, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  z-index: -1;
}

.cyber-dialog :deep(.el-dialog) {
  background: rgba(20, 20, 40, 0.95);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #00f3ff;
  box-shadow: 0 0 30px rgba(0, 243, 255, 0.3);
  backdrop-filter: blur(10px);
  position: relative;
}

.dialog-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #00f3ff, #ff00ff, transparent);
  z-index: 10;
}

.cyber-dialog :deep(.el-dialog__header) {
  background: rgba(10, 10, 25, 0.9);
  color: #ffffff;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(0, 243, 255, 0.3);
  position: relative;
}

.cyber-dialog :deep(.el-dialog__title) {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 0 5px rgba(0, 243, 255, 0.7);
}

.cyber-dialog :deep(.el-dialog__body) {
  padding: 30px 30px 10px;
}

.cyber-dialog :deep(.el-dialog__footer) {
  padding: 15px 30px 25px;
  justify-content: center;
  border-top: 1px solid rgba(0, 243, 255, 0.2);
}

.password-form {
  padding: 0 10px;
}

.cyber-button {
  background: rgba(50, 50, 80, 0.7);
  border: 1px solid rgba(0, 243, 255, 0.5);
  color: #00f3ff;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.cyber-button:hover {
  background: rgba(0, 243, 255, 0.2);
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.4);
  border-color: #00f3ff;
}

.cyber-button.primary {
  background: linear-gradient(90deg, #00f3ff, #00aaff);
  border: 1px solid #00f3ff;
  color: #000;
  font-weight: 600;
}

.cyber-button.primary:hover {
  background: linear-gradient(90deg, #00aaff, #00f3ff);
  box-shadow: 0 0 20px rgba(0, 243, 255, 0.6);
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}

.cyber-dropdown :deep(.el-dropdown-menu) {
  background: rgba(20, 20, 40, 0.95);
  border: 1px solid rgba(0, 243, 255, 0.5);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
}

.cyber-dropdown :deep(.el-dropdown-menu__item) {
  color: #e0e0ff;
  transition: all 0.3s ease;
}

.cyber-dropdown :deep(.el-dropdown-menu__item:hover) {
  background: rgba(0, 243, 255, 0.2);
  color: #00f3ff;
}

.cyber-dropdown :deep(.el-dropdown-menu__item--divided) {
  border-top: 1px solid rgba(0, 243, 255, 0.3);
}

.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

@keyframes pulse {
  0% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.7;
  }
}

@keyframes scanline {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .cyber-sidebar {
    position: fixed;
    height: calc(100vh - 70px);
    transform: translateX(0);
    transition: transform 0.3s ease;
  }

  .sidebar-collapse {
    transform: translateX(-100%);
  }

  .logo-text, .user-info {
    display: none;
  }

  .header-nav {
    display: none;
  }
}
</style>
